@import "~scss/variables";

$sw-tooltip-z-index: $z-index-tooltip;
$sw-tooltip-color-background: var(--color-elevation-surface-floating);
$sw-tooltip-color: var(--color-text-inverse-default);
$sw-tooltip-border-radius: var(--border-radius-overlay);
$sw-tooltip-color-light: $color-darkgray-200;
$sw-tooltip-border-color-light: $color-gray-300;

.sw-tooltip {
    position: absolute;
    z-index: $sw-tooltip-z-index;

    &.sw-tooltip--dark {
        background-color: $sw-tooltip-color-background;
        border-radius: $sw-tooltip-border-radius;
        color: $sw-tooltip-color;
        padding: var(--scale-size-12);
        font-size: var(--font-size-2xs);
        word-wrap: break-word;

        &::before {
            content: "";
            position: absolute;
            height: 8px;
            width: 8px;
            transform: rotate(45deg);
            background: $sw-tooltip-color-background;
        }

        &.sw-tooltip--top::before {
            bottom: -4px;
            margin-left: -4px;
            left: 50%;
        }

        &.sw-tooltip--bottom::before {
            top: -4px;
            margin-left: -4px;
            left: 50%;
        }

        &.sw-tooltip--left::before {
            top: 50%;
            margin-top: -4px;
            right: -4px;
        }

        &.sw-tooltip--right::before {
            top: 50%;
            margin-top: -4px;
            left: -4px;
        }
    }

    &.sw-tooltip--light {
        color: $sw-tooltip-color-light;
        font-size: $font-size-xxs;
        font-weight: $font-weight-regular;
        letter-spacing: 0;
        line-height: $line-height-xs;
        width: auto !important;
        height: auto !important;
        padding: 5px 10px;
        background: $sw-tooltip-color;
        border: 1px solid $sw-tooltip-border-color-light;
        box-shadow: 0 3px 6px 0 rgba(120, 138, 155, 50%);
        border-radius: 4px;

        &.sw-tooltip--top {
            margin-top: 6px;
        }

        &.sw-tooltip--bottom {
            margin-top: -4px;
        }

        &.sw-tooltip--left {
            margin-left: 5px;
        }

        &.sw-tooltip--right {
            margin-right: -5px;
        }
    }
}
